<template>
	<!-- 验收详情 -->
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col section_1">
				<view style="" class="flex-row justify-between">
					<text class="text_12">{{list.acceptanceServiceTypeName}}</text>
					<image src="../../../static/images/share.png" mode="" class="image_333" @click="shareFriend"></image>
				</view>
				<text class="text_333 u-m-t-10">验收师傅：{{list.name}}</text>
				<text class="text_333 u-m-t-10">验收合格率：{{list.qualified}}%</text>   
				<!-- 原型图没有展示百分比 -->
				<view class="flex-row  u-m-t-10">
					<text class="text_1">验收质量：</text>
					<!-- <uni-rate  :size="21" v-model="rate" /> -->
				<uni-rate :size="21" v-model="rate"  readonly />
				
				</view>
				<text class="text">*该验收详情已同步工长方便工长验收。</text>
				 <!-- <htz-rate v-model="rate" :count="7"></htz-rate> -->
			</view>
		</view>
		<view class="positionFixed">
			<navigator url="/pages/onSite/onSiteIndex/buildImg/buildImg"> 
				<image :src="imgUrl+'16557870891120311795.png'" class="image_9" />
			</navigator>
		</view>
		<view class="flex-col section_4">
			<view class="flex-col">
				<view class="justify-between group_8 u-m-b-30">
					<text class="text_13">验收类目</text>
				</view>
				<view v-for="(item,i) in listData" :key="i" >
					<text class="text_14">{{item.acceptanceServiceTypeName}}</text>
					<view v-for="(demo,j) in listData[i].acceptanceCategoryDetailsList" :key="j" style="margin-top: 20rpx;">
						<view class="justify-between group_9">
							<text class="text_15">{{demo.acceptanceServiceTypeName}}</text>
							<image v-if="demo.isEdit==0" :src="imgUrl+'close.png'" class="image_119" />
							<image v-if="demo.isEdit==1" :src="imgUrl+'right.png'" class="image_119" />
						</view>
						<view class="flex-col section_5" v-if="demo.isEdit==0">
							<view class="flex-row justify-between" >
								<view class="flex-row u-flex-wrap">
									<text class="text_16">验收问题：{{demo.problemDetails}}</text>
									<!-- <view class="u-flex u-flex-wrap u-flex-1">
											<text class="text_18" v-if="demo.problemDetails">{{demo.problemDetails}}</text>
									</view> -->
								
								</view>
							</view>
							<view class="flex-row equal-division" v-if="demo.problemDetails"> 
								<view v-for="(inner,p) in demo.problemUrl.split(',')" :key="p"> 
									<image :src="inner" class="equal-division-item" />
								</view>
								
							</view>
						</view>
					</view>
					
				</view>
				
			</view>
			<view class="flex-col group_14">
				<view class="divider"></view>
				<view class="flex-row justify-between">
					<text class="text_27" style="font-weight: 600;">验收总结报告</text>
				</view>
				<view class="flex-col section_6">
					<view class="flex-col">
						<view class="flex-row group_20 u-flex-wrap u-p-20">
							<view class="text_29">总体质量描述  </view> 
							<view>{{acceptance.sumQualityDescribe || '无'}}</view>
							
						</view>
						<view class="flex-row equal-division_1 u-flex-wrap">
							<view v-for="(item,i) in pic1" :key="i">
								<image :src="item" class="equal-division-item u-m-r-10" />
							</view>
							
						</view>
					</view>
				</view>
				<view class="flex-col section_6">
					<view class="flex-col">
						<view class="flex-row group_20 u-flex-wrap u-p-20">
							<view class="text_29">质量问题严重程度概括 </view> 
							<view>{{acceptance.sumProblemDescribe || '无'}}</view>
							<!-- <view>{{list.acceptanceSummary.sumQualityDescribe || '无'}}</view> -->
						</view>
						<view class="flex-row equal-division_1 u-flex-wrap">
							<view v-for="(item,i) in pic" :key="i"> 
								<image :src="item" class="equal-division-item u-m-r-10" />
							</view>
							
						</view>
					</view>
				</view>
				<view class="flex-col section_6">
					<view class="flex-col">
						<view class="flex-row group_20 u-flex-wrap u-p-20">
							<view class="text_29">整改建议及相关图片 </view> 
							<view>{{acceptance.rectificationDescribe || '无'}}</view>
						</view>
						<view class="flex-row equal-division_1 u-flex-wrap">
							<view v-for="(item,i) in pic2" :key="i">
								<image :src="item" class="equal-division-item u-m-r-10" />
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<shop-share v-model="show"></shop-share>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name: 'checkEx',
		components: {},
		data() {
			return {
				imgUrl:this.$IMG_URL,
				rate: 0,
				listData:[],
				listinfo:[],
				tsState:'',
				estimated:'',//预计时间
				Qualified:'',//
				ServiceTypeName:'',
				concludeList:'',//验收总结报告传参
				ordersId:'',
				list:'',
				sumProblemPicture:'',
				show:false,
				pic:[],
				pic1:[],
				pic2:[],
				acceptance:{}
			};
		},
		onLoad(option) {
			this.ordersId  =option.ordersId
			
		},
		created() {
			this.getinfo()
		},
		methods: {
			onChange(e) {
				// this.rate = e.value;
				console.log(11111111);
			},
			shareFriend(){
			
				// #ifdef APP-PLUS
					this.show=true;
				this.$store.commit('shareInfo',{
					title:'验收详情',
					path:this.$WEB_URL+'/pages/my/order/checkFWDetail?ordersId'+this.ordersId,
					image: this.$IMG_URL+'login/logo.png'
				});
				// #endif
				// #ifdef H5
				   uni.navigateTo({
				   	url:'/pages/my/order/checkFWDetail?ordersId'+this.ordersId,
				   })
				// #endif
				
			},
			getinfo() {
				this.$http('explan.getYSFWdetails',{
					ordersId:this.ordersId
				}).then(res=>{
					const {data,code} = res
					if(res.code ==200){
						this.list = data
						console.log('sd',data);
						this.acceptance = data.acceptanceSummary
						this.listData = data.acceptanceCategoryDetailsList;
						this.rate = data.quality
						this.pic=this.list.acceptanceSummary.sumProblemPicture.split(',')
						this.pic1=this.list.acceptanceSummary.sumQualityPicture.split(',')
						this.pic2=this.list.acceptanceSummary.rectificationPicture.split(',')
						
						// this.sumProblemPicture =[...pic,...pic1,...pic2]
						
					}
				}).catch(err=>{
					
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	// .text_29 {
	// 	font-size: 36rpx;
	// }
	// .rate{
	// 	width: 200px;
	// 	height: 200px;
	// }

	.equal-division {
		display: grid;
		 grid-template-columns: repeat(4,1fr);
		 gap: 10px;
		
	}
	.u-m-t-10 {
		padding: 20rpx 0;
	}
	.image_333{
		width: 40rpx;
		height: 40rpx;
	}
	.text_333{
		// padding: 20rpx 0;
		font-size: 28rpx;
		color: #999;
	}
	.subBG{
		width: 60%;
		margin: 0 auto;
		background-color: #1d6aff;
		border-radius: 42rpx;
		text-align: center;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 50rpx;
	}
	.image_119{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.text_edit {
		color: #fff;
		font-size: 26rpx;
	}

	.positionFixed {
		position: fixed;
		top: 45%;
		right: 5%;
		z-index: 999;
		display: none;
	}

	.section_5 {
		margin-right: 15rpx;
		margin-top: 28rpx;
		padding: 30rpx 24rpx 32rpx;
		background-color: #f6f7f9;
		border-radius: 16rpx;
	}

	.image {
		width: 26rpx;
		height: 25rpx;
	}
 
	.image_4 {
		width: 32rpx;
		height: 32rpx;
	}

	.equal-division-item {
		flex: 1 1 156rpx;
		border-radius: 16rpx;
		width: 145rpx;
		height: 156rpx;
		flex-wrap: wrap;
	}

	.text_16 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 46rpx;
	}

	.equal-division {
		margin-top: 33rpx;
		flex-wrap: wrap;
	}

	.text_18 {
		margin-left: 24rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_12 {
		margin-left: 4.5rpx;
	}

	.image_14 {
		margin-left: 4.5rpx;
	}

	.image_16 {
		margin-left: 4.5rpx;
	}

	.page {
		background-color: #f6f7f9;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-bottom: 20rpx;
		/* height: 867rpx; */
		position: relative;
	}

	.section_4 {
		padding: 0 17rpx 61rpx 32rpx;
		background-color: #ffffffff;
	}

	.section_1 {
		padding: 0 30rpx;
		padding-bottom: 40rpx;
		padding-top: 30rpx;
		border-top: 1px solid #eee;
		background-color: #ffffffff;
	}

	.section_2 {
		/* margin-top: -847rpx;
    padding: 30.5rpx 21rpx 20rpx;
    position: relative; */
		background-color: #ffffffff;
		background-image: url($IMG_URL+'16557870862856348078.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_12 {
		color: #191919;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.group_14 {
		margin-top: 57rpx;
	}

	.text {
		align-self: flex-start;
		color: #ff371d;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		margin-top: 10rpx;
	}

	.group_1 {
		margin-top: 29rpx;
	}

	.group_2 {
		padding: 22.5rpx 10.5rpx 28rpx;
		position: relative;
	}
  ::v-deep uni-view, uni-image, uni-text {
    box-sizing: border-box;
    flex-shrink: 1;
}
	.section_3 {
		padding: 0 43rpx 72rpx;
		width: 95%;
		margin: 0 auto;
		background-image: url($IMG_URL+'16557870893555091985.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: 40rpx;
	}

	.group_8 {
		border-bottom: solid 1rpx #eeeeee;
		padding-bottom: 20rpx;
	}

	.text_14 {
		margin-top: 29rpx;
		align-self: flex-start;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
		font-weight: 600;
	}

	.group_9 {
		margin-top: 40rpx;
	}

	.group_12 {
		margin-top: 30rpx;
	}

	.group_13 {
		margin-top: 30rpx;
	}

	.text_22 {
		align-self: flex-start;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
		font-weight: 600;
	}

	.group_15 {
		margin-top: 40rpx;
	}

	.group_16 {
		margin-top: 30rpx;
	}

	.divider {
		margin-right: 15rpx;
		margin-top: 32rpx;
		background-color: #eeeeee;
		border-radius: 0.5rpx;
		height: 1rpx;
	}

	.text_27 {
		margin-top: 29rpx;
		align-self: flex-start;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.section_6 {
		margin-right: 15rpx;
		margin-top: 26rpx;
		    background-color: #f6f7f9;
			border-radius: 8px;
		// background-image: url($IMG_URL+'16557870882906301107.png');
		// background-position: 0% 0%;
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
	}

	.text_1 {
		// margin-bottom: 5rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		// line-height: 33rpx;
	}

	.image_1 {
		margin: 10rpx 0 3rpx 20rpx;
	}

	.image_2 {
		margin: 10rpx 0 3rpx 8rpx;
	}

	.image_3 {
		margin: 10rpx 0 3rpx 6rpx;
	}

	.image_5 {
		margin-left: 5rpx;
		margin-top: 6rpx;
	}

	.image_6 {
		margin-top: 6rpx;
	}

	.image_7 {
		position: absolute;
		left: 10.5rpx;
		bottom: 22.5rpx;
		width: 21rpx;
		height: 36rpx;
	}

	.text_2 {
		color: #000000;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.group_3 {
		padding: 47rpx 0 24rpx;
		border-bottom: solid 1rpx #ffffff3d;
	}

	.text_5 {
		margin-top: 21rpx;
		align-self: flex-start;
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_6 {
		margin-top: 24rpx;
		align-self: flex-start;
		color: #ffffff;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_7 {
		margin-top: 25rpx;
		align-self: flex-start;
		color: #ffffff;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.group_5 {
		margin-top: 19rpx;
	}

	.group_6 {
		margin-top: 19rpx;
	}

	.text_13 {
		margin-top: 28rpx;
		color: #191919;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.image_9 {
		filter: drop-shadow(0px 3rpx 3rpx #1c5edd4d);
		width: 114rpx;
		height: 114rpx;
	}

	.text_15 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_10 {
		margin-right: 15rpx;
		margin-top: 6rpx;
	}

	.text_20 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_18 {
		margin-right: 15rpx;
		margin-top: 6rpx;
	}

	.text_21 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_19 {
		margin-right: 15rpx;
		margin-top: 6rpx;
	}

	.text_23 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_20 {
		margin-right: 15rpx;
		margin-top: 6rpx;
	}

	.text_24 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_21 {
		margin-right: 15rpx;
		margin-top: 6rpx;
	}

	.group_21 {
		margin-top: 54rpx;
	}

	.group_23 {
		margin-top: 54rpx;
	}

	.text_4 {
		margin-top: 23rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_8 {
		color: #ffffff;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_9 {
		margin-left: 11rpx;
		color: #ffffff;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_10 {
		color: #ffffff;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_11 {
		margin-left: 11rpx;
		color: #ffffff;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_28 {
		align-self: flex-start;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_20 {
		margin-top: 25rpx;
	
	}

	.equal-division_1 {
		margin-top: 10rpx;
	}

	.equal-division_2 {
		margin-top: 33rpx;
	}

	.equal-division_3 {
		margin-top: 33rpx;
	}

	.image_8 {
	
		border-radius: 50%;
		width: 96rpx;
		height: 96rpx;
	}

	.text_3 {
		margin-left: 32rpx;
		margin-top: 19rpx;
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.text_29 {
		width: 100%;
		padding-bottom: 20rpx;
		color: #000000;
		font-size: 32rpx;
		font-weight: 700;
		font-family: '.AppleSystemUIFont';
		line-height: 42rpx;
	}

	.text_30 {
		margin-left: 4rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_27 {
		margin-left: 4.5rpx;
	}

	.image_28 {
		margin-left: 4.5rpx;
	}

	.image_29 {
		margin-left: 4.5rpx;
	}

	.text_31 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_32 {
		margin-left: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_31 {
		margin-left: 4.5rpx;
	}

	.image_32 {
		margin-left: 4.5rpx;
	}

	.image_33 {
		margin-left: 4.5rpx;
	}

	.text_33 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_34 {
		margin-left: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_35 {
		margin-left: 4.5rpx;
	}

	.image_36 {
		margin-left: 4.5rpx;
	}

	.image_37 {
		margin-left: 4.5rpx;
	}
</style>
